<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
	<link rel="shortcut icon" href="../img/title.png"/>
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<style type="text/css">
	body{
			background-image: url(../img/background.jpg);
			background-size: cover;
			color:#fff;
		}
	#contact-area {
        margin: 0px auto;
        width: 50%;
        background-color: #fff;
         -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         border-radius: 6px;
         /* opacity:0.8; */
    }
 	.conption{
 		padding-bottom: 30px;
 	}
    .contact-box {
        padding: 10px 50px 35px;
        
    }
 
    .contact-box input {
        height: 50px;
        border: 1px solid #f7f6f5;
        font-size: 15px;
        background-color: #f7f6f5;
        font-weight: 500
    }
 
    .contact-box textarea {
        border: 1px solid #f7f6f5;
        padding-top: 10px;
        background-color: #f7f6f5;
        font-size: 15px;
        font-weight: 500
    }
</style>
</head>
<body>
	<section id="contact-area">
		<div style="float: left;">
			<img alt="" src="../img/title.png" style="width: 90px;height: 80px;">
		</div>
       <div class="conption">
			<h2 style="color: #000;text-align: center;padding-top: 80px;" class="">留言板</h2>
			<p style="color: #000;text-align: center;">跟博主说说话吧 ^_^</p>
       </div>
         <div class="contact-box text-center">
             <form id="ajax_contact" action="../messageBoard/save" method="post">
                 <div class="form-group row">
                     <div class="col-lg-6">
                     	<input type="text" class="form-control" id="name" name="name"placeholder="姓名 / 网名*" required="">
                     </div>
                     <div class="col-lg-6">
                     	<input type="text" class="form-control" id="qq" name="qq" placeholder="QQ*" required="">
                     </div>
                 </div>
                  <div class="form-group">
                  	<textarea class="form-control" id="text" name="text" rows="7" placeholder="留言内容*" required=""></textarea>
                  </div>
                 	<p style="text-align: right;"><button type="submit" class="btn btn-success" >提交留言</button></p>
                 	<br>
                 	<hr>
             </form>
           	<div id="form-messages">
           	<!-- <p><button type="button" id="mybtn">点击</button></p> -->
           	<div th:each="m:${model}" style="text-align: left;font-family: '微软雅黑';">
           		<p style="color: #000;">
           			<label th:text="${m.name}" style="font-size: 15px;">网名</label> &emsp;
           			<span th:text="${m.time}" style="font-size: 12px;">时间</span>
           		</p>
           		<p style="color: #000;">
           			&emsp;&emsp;<span th:text="${m.text}"style="font-size: 16px;">内容</span>
           		</p>
           		<hr>
           	</div>
           	</div>
       </div>
	</section>

<script>
	$(function(){
		var name = $("#name").val();
		var qq = $("#qq").val();
		var text = $("#text").val();
		$("#mybtn").click(function(){
		$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',function(){  
			 alert(remote_ip_info.country);//国家  
			 alert(remote_ip_info.province);//省份  
			 alert(remote_ip_info.city);//城市  
			});  
			
		})
	});
	
</script>
</body>
</html>